<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue text-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">用户反馈</block>
			<block slot="right">
				<view class="action">
					<view class="cu-load load-cuIcon" :class="isLoad?'loading':'over'"></view>
				</view>
			</block>
		</cu-custom>
		
	<view class="container">
		<view class="tips">您对我有任何意见和建议，或在使用中遇到问题，请在本页反
馈。我会每天关注并不断优化产品，为您提供更好的服务！</view>
		<view class="form-box">
			<view class="is-required">反馈模块</view>
			<picker :range="pages" :value="pageIdx" range-key="label"  @change="pageChange">
				<view class="page flex justify-between">
					<text>{{form.page ? form.page : '请选择反馈模块' }}</text>
					<text class="cuIcon-right"></text>
				</view>
			</picker>
			<view class="is-required">反馈内容<text class="word-num">（{{form.content.length}}/{{(200-form.content.length)}}字）</text></view>
			<view class="textarea page">
				<textarea placeholder="请输入您的反馈内容，不超过200字" maxlength="200" v-model="form.content" />
			</view>
			<button class="cu-btn btn margin-tb-sm lg" @tap="submit" >
				<text class="cuIcon-loading2 cuIconfont-spin" v-if="isLoad"></text>提交
			</button>
		</view>
	</view>
	</view>
</template>

<script>
	import { add } from '@/api/blog/member/feedback.js'
	import WxValidate from '@/common/WxValidate.js'
	export default {
		data() {
			return {
				isLoad: false,
				pages:[],
				pageIdx: 0,
				form:{
					page:'',
					content:''
				}
			}
		},
		onLoad(options){
			this.pages = this.$cache.get(this.$cache.key.pages)
			this.initValidate()

		},
		onShow(){
		},
		methods: {
			initValidate() {
			    const rules = {
			      page: {
			        required: true,
			        
			      },
			      content:{
			        required:true,
			        maxlength: 200
			      }
			    }
			    const messages = {
			      page: {
			        required: '请选择反馈模块',
			      },
			      content:{
			        required:'请填写反馈内容',
					maxlength:'反馈内容200字以内哦~'
			      }
			    }
			    this.WxValidate = new WxValidate(rules, messages)
			},
			pageChange(e){
				this.pageIdx  = e.detail.value
				this.form.page = this.pages[this.pageIdx].label
			},
			submit(){
				if (this.isLoad) {
					return false
				}
				this.isLoad = true
				const form = this.form
				if (!this.WxValidate.checkForm(form)) {
					const error = this.WxValidate.errorList[0]
					this.$tools.showToast({
					  msg: error.msg
					})
					this.isLoad = false
					return false
				}
				add(form).then(res => {
					this.isLoad = false
					if (res.code === 1) {
						this.$tools.showToast({
						  msg: '提交成功',
						  icon: 'success',
						  duration: 2000
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		.tips{
			font-size: 24rpx;
			line-height: 40rpx;
			color: #999;
		}
		.form-box{
			width: 690rpx;
			border-radius: 12rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
			margin-top: 20rpx;
			.is-required{
				font-size: 28rpx;
				
			}
			.is-required::before{
				display: inline-block;
				content:'*';
				color: #E60012;
				font-size: 34rpx;
				margin-right: 5rpx;
			}
			.word-num{
				font-size: 24rpx;
				color: #999;
			}
			.page{
				background: #F7F7F7;
				border-radius: 16rpx;
				padding: 30rpx 20rpx;
				color: #999;
				font-size: 26rpx;
				margin-top: 20rpx;
				margin-bottom: 50rpx;
			}
			.btn{
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 100rpx;
				margin-bottom: 30rpx;
				background-color: #287FFA;
				color: #fff;
				font-size: 30rpx;
			}
		}
	}
</style>
